<template>
  <div class="aside-box">
    <el-menu :default-active="menuList[0].key" @select="selectMenu">
      <el-menu-item v-for="item in menuList" :key="item.key" :index="item.key">
        <i :class="item.icon" />
        <span slot="title">{{ item.label }}</span>
      </el-menu-item>
    </el-menu>

    <div style="overflow: hidden; display: flex">
      <!-- 图表列表 -->
      <transition>
        <div v-if="charts" class="chart-list">
          <div
            v-for="item in chartList"
            :key="item.key"
            draggable
            class="chart-item"
            @dragstart="dragStartHandle($event, item)"
            @dragend="dragendHandle"
            @dblclick="dblclickHandle(item)"
            @click="clickHandle(item)"
          >
            <div class="list-header">
              <mac-os-control-btn
                class="list-header-control-btn"
                :mini="true"
                :disabled="true"
              />
              <span class="text">{{ item.title }}</span>
            </div>
            <div class="list-center">
              <ChartGloblImage :item="item" />
            </div>
          </div>
        </div>
      </transition>
      <!-- 图层列表 -->
      <transition>
        <div v-if="layers" class="chart-layer">
          <Draggable
            v-if="layerList.length"
            @change="onMoveCallback"
            item-key="id"
            v-model="layerList"
            ghostClass="ghost"
          >
            <div
              @mousedown="mousedownHandle(item)"
              @mouseenter="mouseenterHandle(item)"
              @mouseleave="mouseleaveHandle(item)"
              v-for="item in layerList"
              :key="item.id"
              class="layers-list-item"
              :class="{
                select: targetChart.selectId.includes(item.id),
                hover: targetChart.hoverId == item.id,
              }"
            >
              <div class="item-content">
                <ChartGloblImage :item="item.chartConfig" class="list-img" />
                <span class="list-text">
                  {{ item.chartConfig.title }}
                </span>
                <!-- <layers-status
                    :isGroup="isGroup"
                    :hover="hover"
                    :status="status"
                  ></layers-status> -->
              </div>
              <div
                :class="{
                  'select-modal': targetChart.selectId.includes(item.id),
                }"
              ></div>
            </div>
          </Draggable>
          <div class="empty" v-else>暂无图层~</div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import omit from 'lodash/omit'
import cloneDeep from 'lodash/cloneDeep'
import Draggable from 'vuedraggable'
import { componentInstall } from '@/utils'
import { mapGetters, mapMutations } from 'vuex'
import ChartGloblImage from '@/components/ChartGlobImage'
import MacOsControlBtn from '@/components/MacOsControlBtn'
import { fetchChartComponent, fetchConfigComponent } from '@/packages'
export default {
  components: { ChartGloblImage, MacOsControlBtn, Draggable },
  data () {
    return {
      chartList: [],
      layerList: [],
      packagesListObj: {
        Charts: {
          icon: 'el-icon-s-data',
          label: '图表'
        },
        Informations: {
          icon: 'el-icon-info',
          label: '信息'
        },
        Tables: {
          icon: 'el-icon-s-grid',
          label: '列表'
        },
        Decorates: {
          icon: 'el-icon-refrigerator',
          label: '小组件'
        },
        Photos: {
          icon: 'el-icon-picture-outline',
          label: '图片'
        },
        Icons: {
          icon: 'el-icon-star-off',
          label: '图标'
        },
      }
    }
  },
  computed: {
    ...mapGetters(['packagesList', 'charts', 'layers', 'componentList', 'targetChart']),
    menuList () {
      let arr = []
      for (const val in this.packagesList) {
        arr.push({
          key: val,
          icon: this.packagesListObj[val].icon,
          label: this.packagesListObj[val].label,
          list: this.packagesList[val]
        })
      }
      return arr
    },
  },
  created () {
    this.chartList = this.menuList[0].list
  },
  methods: {
    ...mapMutations('chartEdit', ['setEditCanvas', 'setTargetSelectChart', 'setTargetHoverChart']),
    //选择菜单
    selectMenu (val) {
      this.chartList = this.menuList.find(item => item.key == val).list
    },
    // 拖拽处理  
    dragStartHandle (e, item) {
      if (item.disabled) return
      // 动态注册图表组件
      componentInstall(item.chartKey, fetchChartComponent(item))
      componentInstall(item.conKey, fetchConfigComponent(item))
      // 将配置项绑定到拖拽属性上
      e.dataTransfer.setData('ChartData', JSON.stringify(omit(item, ['image'])))
      // 修改状态
      this.setEditCanvas({ key: 'isCreate', value: true })
    },
    // 拖拽结束
    dragendHandle () {
      this.setEditCanvas({ key: 'isCreate', value: false })
    },
    // 图层列表点击事件
    mousedownHandle (item) {
      const { id } = item
      this.setTargetSelectChart({ id })
    },
    // 图层列表鼠标进入事件
    mouseenterHandle (item) {
      this.setTargetHoverChart(item.id)
    },
    // 图层列表移出事件
    mouseleaveHandle () {
      this.setTargetHoverChart(undefined)
    },
    // 图层列表移动结束处理
    onMoveCallback (val) {
      const { oldIndex, newIndex } = val.moved
      if (newIndex - oldIndex > 0) {
        // 从上往下
        const moveTarget = this.componentList.splice(-(oldIndex + 1), 1)[0]
        this.componentList.splice(-newIndex, 0, moveTarget)
      } else {
        // 从下往上
        const moveTarget = this.componentList.splice(-(oldIndex + 1), 1)[0]
        if (newIndex === 0) {
          this.componentList.push(moveTarget)
        } else {
          this.componentList.splice(-newIndex, 0, moveTarget)
        }
      }
    }
  },
  watch: {
    componentList (val) {
      this.layerList = cloneDeep(val).reverse()
    }
  }
}
</script>

<style lang="scss" scoped>
$centerHeight: 52px;
.aside-box {
  display: flex;
  height: 100%;
  .chart-list {
    box-sizing: border-box;
    width: 200px;
    padding: 8px 6px 80px;
    overflow: auto;
    height: 100%;
    &::-webkit-scrollbar {
      width: 3px;
    }
    .chart-item {
      overflow: hidden;
      border-radius: 6px;
      cursor: pointer;
      border: 1px solid rgba(0, 0, 0, 0);
      background-color: #f2f3f5;
      box-shadow: -3px 2px 5px rgba(0, 0, 0, 0.3);
      margin-bottom: 20px;
      .list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2px 15px;
        background-color: #e5e6eb;
        .text {
          white-space: nowrap;
          font-size: 12px;
          margin-left: 8px;
          user-select: none;
        }
      }
      .list-center {
        padding: 6px 0;
        height: 100px;
        overflow: hidden;
        text-align: center;
        .list-img {
          height: 100px;
          max-width: 140px;
          border-radius: 6px;
          transition: all 0.4s;
          object-fit: cover;
          &:hover {
            transform: scale(1.08);
          }
        }
      }
    }
  }
  .chart-layer {
    width: 200px;
    height: 100%;
    overflow: auto;
    .ghost {
      opacity: 0;
    }
    .layers-list-item {
      position: relative;
      height: $centerHeight;
      width: 90%;
      margin: 5px 5%;
      margin-bottom: 5px;
      border-radius: 5px;
      cursor: pointer;
      border: 1px solid rgba(0, 0, 0, 0);

      .item-content {
        display: flex;
        align-items: center;
        z-index: 1;
        padding: 6px 5px;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        .list-img {
          flex-shrink: 0;
          width: 60px;
          height: 42px;
          border-radius: 5px;
          overflow: hidden;
          border: none !important;
          padding: 2px;
        }
        .list-text {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 5em;
          padding-left: 6px;
          font-size: 10px;
        }
      }

      .select-modal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        background-color: #47e0c4;
      }
      /* 选中样式 */
      &.select {
        border: 1px solid #47e0c4;
        background-color: rgba(0, 0, 0, 0);
      }
      &.hover,
      &:hover {
        background-color: #e3e3e4;
      }
    }
    &.hide {
      width: 0;
    }
    &::-webkit-scrollbar {
      width: 4px;
    }
    .empty {
      text-align: center;
      margin-top: 10px;
      white-space: nowrap;
      opacity: 0.4;
    }
  }
}
.v-enter-active,
.v-leave-active {
  transition: 0.3s;
}
.v-enter,
.v-leave-to {
  width: 0 !important;
  opacity: 0;
}
</style>